<template>
	<div>
		<crudTable :config="config"></crudTable>
	</div>
</template>

<script setup>
import { ElMessage } from "element-plus"
import { ref } from "vue"
import api from "../../api/api"
import crudTable from "../../components/crudTable.vue"
import transformDate from "../../utils/transformDate"
const config = ref({
	// 请求的数据地址
	requestUrl: "/index/article",
	// 分页相关数据
	pageNum: 1,
	pageSize: 5,
	// 返回的数据集名称 默认为data 指定则为res.data[resName]
	resName: "rows",
	// 是否显示更新框与当前选中的row
	isChange: false,
	nowRow: {},
	// 过滤数据函数
	fliterFn: (data) => {
		data.forEach(x => {
			x.articleTime = transformDate(x.articleTime)
		})
		return data
	},
	// 需要显示的数据
	TableColumns: [{
		prop: "articleAuthor",
		label: "作者",
		width: ""
	}, {
		prop: "articleTime",
		label: "发布时间",
		width: ""
	}
	],
	// 搜索的提示文本
	searchText: "搜索文章标题",
	searchKey: "articleTitle",
	// 排序内容
	sort: {
		sortKey: "articleTitle",
		sortLabel: "文章标题",
		// 1为最开始
		sortPlace: 1
	},
	// 需要显示的按钮及对应操作方法
	operationBtns: [
		{
			// 按钮样式 即elmentUi按钮样式
			title: "更新",
			size: "small",
			type: "primary",
			// 绑定对应的方法 直接调用 
			fn: (item) => {
				// 显示模态框 并将当前列数据传进去
				config.value.isChange = true
				config.value.nowRow = item
			}
		},
		{
			title: "删除",
			size: "small",
			type: "danger",
			// 绑定对应的方法 直接调用 
			fn: (item) => {
				api.delete(`/admin/article/${item._id}`).then((res) => {
					if (res.data.status === 0) {
						ElMessage.success("删除成功!")
					}
				})
			}
		},
	],
	// 更新时会触发的方法
	updata(item) {
		api.put(`/admin/article/${item._id}`, item).then((res) => {
			if (res.data.status === 0) {
				config.value.isChange = false
				ElMessage.success("更新成功!")
			} else {
				ElMessage.error("更新失败")
			}
		})
	}
})
</script>

<style lang="scss" scoped>

</style>